<template>
    <view style="padding-bottom: 30rpx;">
        <form action="">
            <view class="formWrap">
                <view class="wrapInfo">
                    <view class="iptWrap">
                        <view class="label">真实姓名</view>
                        <input class="iptSyl" :disabled="status == '审核中' || status == '已认证'" placeholder-class="inputPlaceholder" type="test" name="realname" v-model="expertName" placeholder="请输入真实姓名" @blur="getPhoneNum" />
                    </view>
                    <view class="line"></view>
                </view>
                <view class="wrapInfo">
                    <view class="iptWrap">
                        <view class="label">手机号码</view>
                        <input class="iptSyl" disabled="true" placeholder-class="inputPlaceholder" type="test" name="phoneNumber" v-model="phoneNumber" />
                    </view>
                    <view class="line"></view>
                </view>
                <view class="wrapInfo">
                    <view class="iptWrap">
                        <view class="label">注册身份</view>
                        <view class="iptSyl" style="display: flex;">
                            <view class="checkboxSyl" style="margin-right: 20rpx;" :style="{color: rankStatus == 1 ? '#FF7F22' : '#666666'}" @click="changeRank('1')">情感大师</view>
                            <view class="checkboxSyl" :style="{color: rankStatus == 2 ? '#FF7F22' : '#666666'}" @click="changeRank('2')">心理医生</view>
                        </view>
                    </view>
                    <view class="line"></view>
                </view>
                <view class="wrapInfo">
                    <view class="iptWrap"  @click="Skill">
                        <view class="label">擅长技能</view>
                        <view class="iptSyl" style="display: flex;">
                            <view v-if="!arr.length" style="color: #333333;">请选择技能</view>
                            <view v-else class="kill" style="margin-left:10rpx" v-for="(item,idx) in arr" :key="idx">{{ item.itemvalue }}</view>
                            <!-- <view v-if="status == '审核中'" class="kill" style="margin-left:10rpx" v-for="(item,idx) in arr" :key="idx">{{ item }}</view> -->
                            <!-- <view class="checkboxSyl" style="margin-right: 20rpx;" :style="{color: rankStatus == 1 ? '#FF7F22' : '#666666'}" @click="changeRank('1')">情感大师</view>
                            <view class="checkboxSyl" :style="{color: rankStatus == 2 ? '#FF7F22' : '#666666'}" @click="changeRank('2')">心理医生</view> -->
                        </view>
                    </view>
                    <view class="line"></view>
                </view>
                <view class="wrapInfo">
                    <view class="iptWrap" @click="timeChange">
                        <view class="label">在线时间</view>
                        <view v-if="onlineTime[0] == ''" style="color: #333333;">请选择在线时间</view>
                        <view v-else class="iptSyl" style="display: flex;">
                            {{ onlineTime[0] }}——{{ onlineTime[1] }}
                            <!-- <view class="checkboxSyl" style="margin-right: 20rpx;" :style="{color: rankStatus == 1 ? '#FF7F22' : '#666666'}" @click="changeRank('1')">情感大师</view>
                            <view class="checkboxSyl" :style="{color: rankStatus == 2 ? '#FF7F22' : '#666666'}" @click="changeRank('2')">心理医生</view> -->
                        </view>
                    </view>
                    <view class="line"></view>
                </view>
                <view class="wrapInfo">
                    <view class="iptWrap">
                        <view class="label">咨询收费</view>
                        <input style="width: 200rpx;" :disabled="status == '审核中' || status == '已认证'" type="digit" placeholder-class="inputPlaceholder" name="money" v-model="money" placeholder="请输入费用" @blur="getPhoneNum" />
                        <view style="font-size: 12px;">(分钟/人民币)</view>
                    </view>
                    <view class="line"></view>
                </view>
                
                <!-- <view class="wrapInfo">
                    <view class="iptWrap">
                        <view class="label">本人照片</view>
                        <view class="iptSyl">
                            <uni-file-picker v-if="status != '审核中'" limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" @select = "uploadAvatar" file-mediatype="image">
                                <image mode="aspectFill" style="width: 68rpx; height: 68rpx; border-radius: 50%;" :src="avatar" />
                            </uni-file-picker>
                            <image mode="aspectFill" v-else style="width: 68rpx; height: 68rpx; border-radius: 50%;" :src="avatar" />
                        </view>
                    </view>
                    <view class="line"></view>
                </view> -->
                <view class="wrapInfo" style="padding-bottom: 30rpx;">
                    <view class="iptWrap">
                        <view class="label">个人描述</view>
                        <input class="iptSyl" :disabled="status == '审核中' || status == '已认证'" placeholder-class="inputPlaceholder" type="test" name="realname" v-model="expertBriefIntroduction" placeholder="这家伙很懒，什么都没有写~">
                    </view>
                </view>
            </view> 

            <!-- <view class="formWrap" style="padding: 30rpx">
                <view class="cardTitle">上传身份证</view>
                <view class="cardWrap">
                    <view class="card">
                        <uni-file-picker v-if="status != '审核中'" limit="1" :del-icon="false" disable-preview :imageStyles="cardStyle" @select = "uploadCardFront" file-mediatype="image">
                            <image style="width: 320rpx; height: 200rpx;" :src="personImg" mode="aspectFill" />
                        </uni-file-picker>
                        <image v-else style="width: 300rpx; height: 200rpx;" :src="personImg" mode="aspectFill" />
                        <view class="cardDesc">身份证人像面</view>
                    </view>
                    <view class="card">
                        <uni-file-picker v-if="status != '审核中'" limit="1" :del-icon="false" disable-preview :imageStyles="cardStyle" @select = "uploadCardBack" file-mediatype="image">
                            <image style="width: 320rpx; height: 200rpx;" :src="countryImg" mode="aspectFill" />
                        </uni-file-picker>
                        <image v-else style="width: 300rpx; height: 200rpx;" :src="countryImg" mode="aspectFill" />
                        <view class="cardDesc">身份证国徽面</view>
                    </view>
                </view>
            </view> -->
            <!-- <view class="formWrap" style="padding: 30rpx;">
                <view class="cardTitle">上传资质</view>
                <view class="cardWrap" style="justify-content: center;">
                    <view class="card">
                        <uni-file-picker v-if="status != '审核中'" limit="1" :del-icon="false" disable-preview :imageStyles="certificationSyl" @select = "uploadCertification" file-mediatype="image">
                            <image style="width: 440rpx; height: 300rpx;" :src="certificationImg" mode="aspectFill" />
                        </uni-file-picker>
                        <image v-else style="width: 440rpx; height: 300rpx;" :src="certificationImg" mode="aspectFill" />
                        <view class="cardDesc">资格证</view>
                    </view>
                   
                </view>
            </view> -->

            <!-- 技能普通弹窗 -->
            <uni-popup
            ref="popup"
            background-color="#fff"
            border-radius="10px"
            >
                <view
                    class="popup-content"
                    style="background-color: #fff; border-radius: 10px"
                    :class="{ 'popup-height': type === 'left' || type === 'right' }"
                >
                    <view class="card_jn">
                    <view class="card_jn_title">
                        <view></view>
                        <view>请选择擅长技能{{ this.arr.length }}/3</view>
                        <view @click="close()"
                        ><image
                            :src="guanbi"
                            style="width: 48rpx; height: 48rpx"
                            mode="scaleToFill"
                        /></view>
                    </view>
                    <view class="card_jn_box">
                        <view
                        class="box"
                        :style="{
                            backgroundColor: item.iscolor == true ? '#FFF5ED' : '',
                            border: item.iscolor == true ? '2px solid #FF7F22' : '',  
                            width: item.iscolor == true ? '168rpx' : '176rpx', 
                            height: item.iscolor == true ? '64rpx' : '72rpx',     
                            lineHeight: item.iscolor == true ? '64rpx' : '72rpx',              
                        }"
                        v-for="(item, index) in skilldata"
                        :key="item.id"
                        @click="selectChange(item, index)"
                        >{{ item.title }}</view
                        >
                    </view>
                    <view class="footer_btn" @click="chooseKills">确定</view>
                    </view>
                </view>
            </uni-popup>
            <timeRange
            ref="time" 
                :startTime="startTime" 
                :startDefaultTime="startDefaultTime"
                :endTime="endTime"
                :endDefaultTime="endDefaultTime"
                @timeRange="timeRange"
            ></timeRange>
            <view class="submitSyl"  @click="submit" :style="{background:status == '审核中' || status == '已认证' ? '#FABA8C':'#FF7F22'}">{{ status }}</view>

        </form>
    </view>
</template>

<script>
import { uploadImg } from '../../../utils/common'
import { platformAPI, approveDetailAPI } from '../../../utils/api'
import { queryExpertHomePage, dictItemList,editExpertHomePage } from "../../../utils/myapi";
import { getImgUrl } from '../../../utils/common'
import timeRange  from '../../../components/tpf-time-range/tpf-time-range'
    export default {
        components:{timeRange},
        data(){
            return{
                status:1,
                expertName:"",
                rankStatus:1,
                phoneNumber:"",
                money:'',
                startTime:"00:00",
                startDefaultTime:"00:00",
                endTime:"24:00",
                endDefaultTime:"24:00",
                skilldata:[],
                arr:[],
                obj:{},
                list:[],
                onlineTime:['',''],
                // avatar:getImgUrl('/img/allImgs/rzimg/avatar.svg'),
                // expertAvatar:'',
                expertBriefIntroduction:'',
                personImg:getImgUrl('/img/allImgs/rzimg/renxiangmian.svg'),
                cardFront:'',
                countryImg:getImgUrl('/img/allImgs/rzimg/guohuimian.svg'),
                cardBack:'',
                certificationImg:getImgUrl('/img/allImgs/rzimg/zigezheng.svg'),
                certification:'',
                userinfo:{},
                imageStyles: {
					width: 44,
					height: 44,
					border: {
						radius: '50%'
					}
				},
                cardStyle:{
                    width:"320rpx",
                    height: '200rpx'
                },
                certificationSyl:{
                    width:"440rpx",
                    height: '300rpx'
                }
            }
        },
        onLoad(option){
            console.log("options==========>",option)
            let userinfo = uni.getStorageSync("userInfo")
            this.userinfo = userinfo
            if(option.status == '' || option.status == 'undefined' || option.status == '1'){
                this.status = '去认证'
            }else if(option.status == '2'){
                this.status = '审核中'
                this.getDetails()
            }else if(option.status == '3'){
                uni.showToast({
                    title:'审核失败,请再次认证',
                    icon:'none'
                }) 
                this.status = '再次认证'
                this.getDetails()
            }else{
                this.status = '已认证'
                this.getDetails()
            }
            this.getSkill()
        },
        methods: {
            // async UserDetails() {
            //     let userInfo = wx.getStorageSync('userInfo')
            //     const data = await queryExpertHomePage(userInfo.id);
            //     this.obj  = data.result
            //     this.list = data.result.expertExcel.split(',')
            //     console.log(this.list,'list');
            // },
            //选择时间
            timeChange(){
                if(this.status != '审核中' && this.status != '已认证'){
                    this.$refs['time'].open();
                }
            },
            async timeRange(e){
                console.log(e,'startTime');
                this.onlineTime = e;
                console.log("onlineTime",this.onlineTime)
                // let paramms = {
                //     expertId:userInfo.id,
                //     expertOnline:e[0] + '——' + e[1]
                // }
                // const res = await editExpertHomePage(paramms)
                // if(res.code == 200)
                //     {
                //     uni.showToast({
                //         title: '编辑成功',
                //         //将值设置为 success 或者直接不用写icon这个参数
                //         icon: 'success',
                //         //显示持续时间为 2秒
                //         duration: 1000
                //     })
                // }
            },
            async chooseKills() {
                // let userInfo = wx.getStorageSync('userInfo')
                // let experdata = []
                // this.arr.map((item)=>{
                //     experdata.push(item.itemvalue)
                // })
                // const paramms = {
                //     expertExcel:experdata.join(','),
                //     expertId:userInfo.id,//专家id
                // }
                // if(experdata.length == 0){
                //     uni.showToast({
                //         title: '请选择技能',
                //         //将值设置为 success 或者直接不用写icon这个参数
                //         icon: 'error',
                //         //显示持续时间为 2秒
                //         duration: 1000
                //     })
                // }else{
                //     const res = await editExpertHomePage(paramms)
                //     if(res.code == 200){
                //         this.skilldata = []
                //         this.arr = []
                //         this.getSkill()
                //         // this.UserDetails()
                //         uni.showToast({
                //             title: '编辑成功',
                //             //将值设置为 success 或者直接不用写icon这个参数
                //             icon: 'success',
                //             //显示持续时间为 2秒
                //             duration: 1000
                //         })
                //     }
                // }
                this.$refs.popup.close();
                console.log("this.arr",this.arr)
            },
            //选择需要的技能
            selectChange(item, index) {
                this.skilldata[index].iscolor = !this.skilldata[index].iscolor;
                if (this.skilldata[index].iscolor == true) {
                    this.arr.push({ id: item.id,itemvalue:item.title });
                    if (this.arr.length > 3) {
                        this.skilldata[index].iscolor = false;
                        for (let i = 0; i < this.arr.length; i++) {
                            if (this.arr[i].id == item.id) {
                            this.arr.splice(i, 1);
                            }
                        }
                    }
                } else {
                    for (let i = 0; i < this.arr.length; i++) {
                        if (this.arr[i].id == item.id) {
                            this.arr.splice(i, 1);
                        }
                    }
                }
                console.log(this.arr);
                
            },
            //选择技能
            Skill() {
                if(this.status != '审核中' && this.status != '已认证'){
                    this.$refs.popup.open("bottom");
                }
            },
            //获取技能
            async getSkill(){
                const paramms =  {
                pageNo:1,
                pageSize:100000000,
                dictId:'1750089799336751105'
                }
                const res = await dictItemList(paramms)
                console.log(res,'data');
                res.result.records.map((item)=>{
                    this.skilldata.push({
                        id:item.id,
                        title:item.itemText,
                        iscolor: false,
                    })
                })
            },
            getPhoneNum(){
                this.phoneNumber = this.userinfo.phone
            },
            async getDetails(){
                const res = await approveDetailAPI(this.userinfo.id);
                const data = res.result
                console.log(data);
                
                if(data != null){
                    console.log(data.expertExcel.split(","));
                    let arr = [];
                    const info = data.expertExcel.split(",")
                    info.map(item => arr.push({itemvalue:item}))
                    this.expertName = data.expertName
                    this.expertBriefIntroduction = data.expertBriefIntroduction
                    // this.avatar = data.expertPhoto
                    this.rankStatus = data.registeredIdentity == '情感大师' ? 1 : 2
                    this.phoneNumber = data.expertPhone
                    this.arr = arr
                    this.money = data.expertToll
                    this.onlineTime = data.expertOnline.split("——")
                    console.log("this.expertOnline",this.onlineTime)

                    // const person = data.postPictureList.find(item => item.pictureType == '1')
                    // const country = data.postPictureList.find(item => item.pictureType == '2')
                    // const certification = data.postPictureList.find(item => item.pictureType == '3')
                    // this.personImg = person.pricturePath
                    // this.countryImg = country.pricturePath
                    // this.certificationImg = certification.pricturePath

                    // this.expertAvatar = data.expertPhotoPath
                    // this.cardFront = person.prictureName
                    // this.cardBack = country.prictureName
                    // this.certification = certification.prictureName
                }
                if( this.status == '再次认证'){
                    this.arr = []
                }
                
            },
            changeRank(type){
                console.log("this.status",this.status)
                if(this.status != '审核中' && this.status != '已认证'){
                    console.log('哈哈哈哈');
                    
                    this.rankStatus = type
                }
            },
            // 上传头像
            async uploadAvatar(e){
                await uploadImg(e,(data) => {
                    this.expertAvatar = data.message
                })
            },
            // 上传人像面
            async uploadCardFront(e){
                await uploadImg(e,(data) => {
                    this.cardFront = data.message
                })
            },
            // 上传国徽面
            async uploadCardBack(e){
                await uploadImg(e,(data) => {
                    this.cardBack = data.message
                })
            },
             // 上传资格证
             async uploadCertification(e){
                await uploadImg(e,(data) => {
                    console.log("data============>",data)
                    this.certification = data.message
                })
            },
            
            
            // 表单提交
            async submit(){
                // const { expertName, rankStatus, expertAvatar, expertBriefIntroduction, cardFront, cardBack, certification} = this;
                const {expertName,phoneNumber,rankStatus,arr, money,onlineTime, expertBriefIntroduction } = this;
                console.log({expertName,phoneNumber,rankStatus,arr, money,onlineTime, expertBriefIntroduction})
                
                if([expertName,phoneNumber,rankStatus, money, expertBriefIntroduction].includes('')){
                    wx.showToast({
                      title: '请补充完整数据',
                      icon: 'none'
                    })
                }else{
                    const killsData = arr.map(item => item.itemvalue)
                    if(this.status == '去认证' || this.status == '再次认证'){
                        const params = {
                            expertId:this.userinfo.id,
                            expertName,
                            expertPhone: phoneNumber,
                            registeredIdentity : rankStatus == '1'? '情感大师':'心理医生',
                            expertExcel:killsData.join(","),
                            expertOnline:`${onlineTime[0]}——${onlineTime[1]}`,
                            expertToll: money,
                            expertBriefIntroduction
                            // expertPhoto:expertAvatar,
                            // expertBriefIntroduction,
                            // postPictureList:[
                            //     {
                            //         pricturePath:cardFront,
                            //         pictureType:1
                            //     },{
                            //         pricturePath:cardBack,
                            //         pictureType:2
                            //     },{
                            //         pricturePath:certification,
                            //         pictureType:3
                            //     },
                            // ]
                        }
                        const res = await platformAPI(params)
                        if(res.code == 200){
                            uni.showToast({
                                title:'提交成功',
                                icon:'none'
                            })
                            // const data = res.result
                            // const person = data.postPictureList.find(item => item.pictureType == '1')
                            // const country = data.postPictureList.find(item => item.pictureType == '2')
                            // const certification = data.postPictureList.find(item => item.pictureType == '3')
                            // this.personImg = person.pricturePath
                            // this.countryImg = country.pricturePath
                            // this.certificationImg = certification.pricturePath
                            // this.avatar = data.expertPhoto

                            // this.expertAvatar = data.expertPhotoPath
                            // this.cardFront = person.prictureName
                            // this.cardBack = country.prictureName
                            // this.certification = certification.prictureName
                            // 在某个页面的方法中触发跳转外链
							uni.getSetting({
								withSubscriptions: true,
								success(res) {
									if (!res.subscriptionsSetting.mainSwitch) {
										uni.openSetting({ //打开设置页
											success(res) {
												console.log(res.authSetting);
											}
										})
										_this.$refs.alertDialog.open()

									} else {
										uni.requestSubscribeMessage({
											tmplIds: ['BHXYf6RT-Z7tbF38_SvYymvbZiQfEpvIzcYChbp8xmU'],
											success(res) {
												console.log(res);
												if (res['BHXYf6RT-Z7tbF38_SvYymvbZiQfEpvIzcYChbp8xmU'] == "accept") { // 用户点击确定后
													console.log('1111');
												}
											}
										})
									}
								}
							})
                            this.status = '审核中'
                        }
                    }
                    
                }
                
            }
            
        },
    }
</script>

<style lang="scss" scoped>

.card_jn {
    padding: 0rpx 30rpx;
    .card_jn_title {
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 1000;
      color: #333333;
      padding: 30rpx 0rpx;
    }
    .card_jn_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: 40rpx;
      .box {
        width: 176rpx;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        background: #f7f7f7;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #666666;
        padding-left: 20rpx;
        padding-right: 20rpx;
        margin-top: 20rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
}
.footer_btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #ff7f22;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    letter-spacing: 2rpx;
    color: #ffffff;
}
.submitSyl{
    margin: 30rpx;
    text-align: center;
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #FF7F22;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    color: #fff;
}
.cardDesc{
    margin-top: 20rpx;
    text-align: center;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #333333;
}
.cardTitle{
    margin-bottom: 30rpx;
}
.cardWrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.checkboxSyl{
    padding: 12rpx 20rpx;
    background: #FFF2E9;
    color: #666666;
    font-size: 26rpx;
    border-radius: 8rpx;
}
.wrapInfo{
    padding: 30rpx 30rpx 0 30rpx;
}
.line{
    width: 100%;
    height: 2rpx;
    background: #EBEBEB;
    margin: 20rpx 0;
}
.iptWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label{
        width: 136rpx;
        height: 48rpx;
        font-size: 34rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 48rpx;
    }
    input{
        width: 480rpx;
        text-align: right;
        height: 48rpx;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 48rpx;
    }
    /deep/.inputPlaceholder {
        // float: right;
        text-align: right;
    }


}
.formWrap{
    margin: 30rpx;
    background-color: #fff;
    border-radius: 8rpx;
}

</style>
<style>
page{
    background-color: #f5f5f5;
    color: #333333;
}
</style>